<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>-->
  <link rel="stylesheet" href="index.css">
  <link rel="shortcut icon" href="static/img/favicon.jpg">
</head>
<body>
<section>

  <!-- 登录 -->

  <div class="container">
    <div class="user singinBx">
      <div class="imgBx"><img src="img/L.png" alt=""></div>
      <div class="formBx">
        <form id="form1" action="">
          <h2>登录</h2>
          <label>
            <input type="text" name="username" placeholder="用户名" autocomplete>
          </label>
          <label>
            <input type="password" name="password" placeholder="密码" autocomplete>
          </label>
          <label>
            <input  id="loginbtn" value="登录" readonly="readonly" onclick="login()" autocomplete>
          </label>
          <p class="signup">没有账号？<a onclick="topggleForm();">注册</a></p>
        </form>
      </div>
    </div>

    <!-- 注册 -->

    <div class="user singupBx">
      <div class="formBx">
        <form id="form2">
          <h2>注册</h2>
          <label>
            <input type="text" name="username" placeholder="用户名"  autocomplete>
          </label>
          <label>
            <input type="email" name="email" placeholder="邮箱地址" >
          </label>
          <label>
            <input type="password" name="password" placeholder="密码"  autocomplete>
          </label>
<!--          <label>-->
<!--            <input type="password" name="" placeholder="再次输入密码" autocomplete>-->
<!--          </label>-->
          <input class="register"  value="注册" readonly="readonly" onclick="register()">
          <p class="signup">已有账号？<a  onclick="topggleForm();">登录</a></p>
        </form>
      </div>
      <div class="imgBx"><img src="img/R.png" alt=""></div>
    </div>

  </div>
</section>
<script type="text/javascript">
  function topggleForm(){
    var container = document.querySelector('.container');
    container.classList.toggle('active');
  }

  function login(){
    var obj1 = $("#form1").serializeArray();

    console.log(obj1)
    $.ajax({
      url: "http://127.0.0.1:9000/login",
      type: "POST",
      contentType:"application/x-www-form-urlencoded;charset=UTF-8",
      headers: "Access-Control-Allow-Headers",
      // data: JSON.stringify(obj1),
      data: obj1,
      dataType: "json",
      timeout: 5000,
      xhrFields:{
        withCredentials: true
      },
      success:function (result){
        alert(result.message)
        // window.location.assign("test.html")
        if (result.message==="登录成功"){
          window.location.assign("test.html")
        }
      },
      error:function (){
        alert("请求失败");
      }
    })
  }
  function register(){
    var obj2 = $("#form2").serializeArray();
    console.log(obj2)
    $.ajax({
      url: "http://127.0.0.1:9000/register",
      type: "POST",
      contentType:"application/x-www-form-urlencoded;charset=UTF-8",
      headers: "Access-Control-Allow-Headers",
      // data: JSON.stringify(obj1),
      data: obj2,
      dataType: "json",
      timeout: 5000,
      xhrFields:{
        withCredentials: true
      },
      success:function (result){
        alert(result.message)
        // window.location.assign("test.html")
        if (result.message==="登录成功"){
          window.location.assign("test.html")
        }
      },
      error:function (){
        alert("请求失败");
      }
    })
  }
</script>

</body>
</html>
